<script setup lang="ts">
  import type { CustomPaymentInstance } from '@/types/components';
import { ref } from 'vue'

const popupRef = ref<UniHelper.UniPopupInstance>()
  const customPaymentRef = ref<CustomPaymentInstance>()
  const openPayment = () => {
    customPaymentRef.value?.open()
  }
  const showPopup = () => {
    popupRef.value?.open?.()
  }

  const closePopup = () => {
    popupRef.value?.close?.()
  }
</script>

<template>
  <view>
    <button @click="showPopup">点击弹出</button>
    <uni-popup
      ref="popupRef"
      type="bottom"
      background-color="#FFFFFF"
    >

   <button @click="closePopup">关闭弹层</button>
      <view >弹层内容 </view>
    </uni-popup>
    
    <button @click="openPayment">打开支付弹窗</button>
    <custom-payment ref="customPaymentRef"></custom-payment>
   
  </view>
</template>

<style scoped></style>